<template>
    <el-dialog 
        :visible.sync="isVisible"
        :title="title" 
        :close-on-click-modal='false'
        :close-on-press-escape='false'
        :modal-append-to-body="false"
        @close="closeDialog">
        <div class="form">
            <el-form 
                ref="form" 
                :model="form"
                :rules="form_rules"
                :label-width="dialog.formLabelWidth" 
                style="margin:10px;width:auto;">
                <el-form-item prop='title' label="广告名称:">
                    <el-input type="text" v-model="form.title"></el-input>
                </el-form-item>

                <el-form-item prop='username' label="商品封面图:">
				    <upload-img :isDetail="isDetail" @deleteImage="deleteImage" @addImage="addImage"  :fileList="imageList"></upload-img>
				</el-form-item>

                 <el-form-item  label="链接地址:">
                    <el-input type="text" v-model="form.link"></el-input>
                </el-form-item>
                

                <el-form-item  class="text_right">
                    <el-button @click="isVisible = false">取 消</el-button>
                    <el-button type="primary" @click='onSubmit("form")'>提  交</el-button>
                </el-form-item>

            </el-form>
        </div>
    </el-dialog>
</template>

<script>
   import { mapState, mapGetters } from 'vuex'
   import { adAdd,adEdit } from "@/api/finance";
   import AreaJson from "@/assets/datas/area.json"
   import UploadImg from "@/components/uploadImg";

  export default {
      name:'addFundDialogs',
      components: {
          UploadImg
      },
      data(){
        return {
            isDetail: false,
            areaData:[],
            imageList: [],
            title: '新增广告',
            isVisible: this.isShow,
            form:{
               title: '',
               link: ''
            },
            form_rules: {
                title   : [
                    {required: true, message : '广告名称不能为空！',trigger : 'blur'}
                ],
            },
            //详情弹框信息
            dialog: {
                width:'400px',
                formLabelWidth:'120px'
            }
          }
      },
      props:{
          isShow:Boolean,
          dialogRow:Object
      },
      computed:{
        ...mapGetters(['addFundDialog']),
      },
      created(){
            this.areaData = AreaJson
      },
      mounted(){
       if(this.dialogRow.id) {
           this.title = '编辑广告';
       }
      },
      methods:{
           deleteImage(file) {
            let newFileList = this.imageList.filter(item => item !== file);
            this.imageList = newFileList;
          },
          addImage(file) {
               this.imageList.push(file);
          },
          getCascaderObj(val, opt){
            return val.map(function (value, index, array) {
                for (var item of opt) {
                    if (item.value == value) { 
                        opt = item.children; 
                        return item.label; 
                    }
                }
                return null;
            });
         },
          handleChange(value) {
            console.log([...value]); // ["120000", "120200", "120223"]
            this.form.address = [...value];
            let vals = this.getCascaderObj([...value], this.areaData); // arr
            this.form.tableAddress = vals.join(',').replace(/,/g,'');
          },
          closeDialog(){
              this.$emit('closeDialog');
          },
          //表单提交
          onSubmit(form){
            this.$refs[form].validate((valid) => {
                if (valid) {//表单数据验证完成之后，提交数据;
                    let formData = this[form];
                    const para = Object.assign({}, formData);
                     if (!this.imageList.length) {
                         this.$message.error('至少选择一张商品封面图！');
                        return;
                    }
                    para.image = this.imageList[0].imageId;
                    // edit
                    if(this.dialogRow.id){
                        adEdit(para).then(res => {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            })
                            this.$refs['form'].resetFields()
                            this.isVisible = false
                            this.$emit('getFundList');
                       })
                    }else{
                        // add
                        adAdd(para).then(res => {
                            this.$message({
                                message: '新增成功',
                                type: 'success'
                            })
                            this.$refs['form'].resetFields()
                            this.isVisible = false
                            this.$emit('getFundList');
                       })
                    }
                }
            })
          }
      }
  }
</script>

<style lang="less" scoped>
    .search_container{
        margin-bottom: 20px;
    }
    .btnRight{
        float: right;
        margin-right: 0px !important;
    }
    .searchArea{
        background:rgba(255,255,255,1);
        border-radius:2px;
        padding: 18px 18px 0;
    }
</style>
